import React from "react";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import { Menu, Dropdown, Icon, notification, Button } from "antd";
import { checkIsLogin } from "stores/homeStore/action";
import { logout } from 'utils/api/userApi'

const MenuList = ({checkIsLogin, history}) => {

  const handleLogout = e => {
    const btn = (
      <Button
        type="primary"
        size="small"
        onClick={() => {
          if(localStorage) {
            localStorage.removeItem("token");
          }
          logout()
          checkIsLogin(false, true);
          notification.close("logout");
          history.push("/")
        }}
      >
        确定
      </Button>
    );
    notification.warn({
      message: "退出登录",
      description: "您确定要退出登录吗？",
      btn,
      key: "logout"
    });
  };

  const handleMenuBtnClick = (ev) => {
    const type = ev.target.getAttribute("to");
    switch(type) {
      case 'home': {
        history.push("/");
        break;
      }
      case 'bill': {
        history.push("/bill");
        break;
      }
      case 'user': {
        history.push("/main/user");
        break;
      }
      case 'about': {
        // history.push("/about");
        window.open("http://youngam.cn");
        break;
      }
      default : {
        break;
      }
    }
  }

  const menu = (
    <Menu>
      <Menu.Item>
        <Button type="link" onClick={handleMenuBtnClick} to="home"  icon="home" className="setting-btn">返回主页</Button>
      </Menu.Item>
      <Menu.Item>
        <Button type="link" onClick={handleMenuBtnClick} to="user" icon="user" className="setting-btn">用户设置</Button>
      </Menu.Item>
      <Menu.Item>
        <Button type="link" onClick={handleMenuBtnClick} to="bill" icon="account-book" className="setting-btn">账单页面</Button>
      </Menu.Item>
      <Menu.Item>
        <Button type="link" onClick={handleMenuBtnClick} to="about" icon="heart" className="setting-btn">关于本站</Button>
      </Menu.Item>
    </Menu>
  );

  return (
    <Dropdown.Button
      onClick={handleLogout}
      overlay={menu}
      className="menu-list"
    >
      <Icon type="logout" />
      退出登录
    </Dropdown.Button>
  );
};

export default connect(store=>({}), {
  checkIsLogin
})(withRouter(MenuList));
